@import '@/assets/styles/sassvars';

.page {
  padding: var(--p-4);
  max-width: min(1080px, 100vw);
  --grid-min-width: 300px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: var(--m-2);

  > div {
    --form-background-color: var(--background-elevated-base);

    span:not(:last-child), .item:not(:last-child) {
      margin-bottom: var(--m-2);
    }

    span {
      display: block;
      color: var(--text-subdued);

      &.minititle {
        text-transform: uppercase;
        font-weight: bold;
        color: var(--text-base);
        margin-bottom: var(--m-2);
      }
    }

    .slider.item {
      padding: var(--p-1) var(--p-2);
      background: var(--background-base);
      border-radius: var(--border-radius);
      flex-direction: row-reverse;
      border: 1px solid var(--background-highlight);

      :deep(label) {
        margin-right: auto;
      }
    }
  }
}

/**

  .section {
    padding: var(--p-2);

    > .title {
      margin-bottom: var(--m-2);
    }

    span {
      display: block;
      color: var(--text-subdued);

      &.minititle {
        text-transform: uppercase;
        font-weight: bold;
        color: var(--text-base);
      }

      &.success {
        color: var(--accent-color-success);
      }

      &:not(:last-child) {
        margin-bottom: var(--m-2);
      }
    }

    > div {
      padding: var(--p-4) 0;

      :deep(.danger-button) {
        display: inline-flex;
      }

      @media screen and (min-width: $maxWidthTablet) {
        :deep(.form) {
          width: 345.6px;
        }
      }

      &:nth-child(2) {
        padding-top: 0;
      }

      &:not(:last-child) {
        border-bottom: 1px solid rgb(var(--accent-tint-4));
      }
    }
  }
*/